<script setup>
import { ref } from 'vue'

// 登录的功能
// 用户没有登录的时候显示登录按钮
// 用户已经登录之后显示用户昵称
const isLogin = ref(false)

function login() {
    isLogin.value = true
}
</script>

<template>
    <div v-if="!isLogin">
        <button @click="login">登录</button>
    </div>
    <div v-else>
        昵称：Cyrus
    </div>


    <!-- 控制显示隐藏 v-show -->
    <div v-show="!isLogin">
        未登录
    </div>

    <!-- 
        v-if 是通过删除dom来隐藏界面元素
        v-show 是通过 display:none来隐藏元素
     -->
</template>